<template>
	<!-- <z-paging bg-color="#F8F8F8"   ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="false" :loadingMoreEnabled="false" :auto="false" :hideEmptyView="true"> -->
	<view>
		<view>
			<view class="u-p-20 text-center text-bold text-xl bg-white">选择取消原因</view>
		</view>
		<view  v-for="(item, index) in cancelList" :key="index" class="bg-white u-p-30 solid-bottom" >
			<radio-group @change="handleCheckChange(item)" style="width: 100%;">
				<view class="u-flex">
					<view class="u-flex-8">
						<text>{{item.label}}</text>
					</view>
					<view class="u-flex-2 text-right">
						<radio :value="item.value" color="#FFB143" :checked="item.checked"  style="transform:scale(0.8)"/>
					</view>
				</view>
			</radio-group>
		</view>
		
		<view >
			<view class="u-p-10 bg-white">
				<view class="u-flex ">
					<view class="u-flex-1 u-p-10">
						<u-button @click="handleNoCancel"
								  shape="circle" 
								  :ripple="true">我在想想</u-button>
					</view>
					<view class="u-flex-1 u-p-10">
						<u-button @click="handleCancel"
								  shape="circle" 
								  :ripple="true" 
								  type="info" >确定</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- </z-paging> -->
</template>

<script>
	export default{
		data(){
			return{
				cancelList:[{
					value:'1',
					label:'规格/款式/数量拍错',
					checked:false
				},{
					value:'2',
					label:'无法正常支付',
					checked:false
				},{
					value:'3',
					label:'收货地址信息填写错误',
					checked:false
				},{
					value:'4',
					label:'商品缺货',
					checked:false
				},{
					value:'5',
					label:'我不想买了',
					checked:false
				},{
					value:'6',
					label:'其他',
					checked:false
				}],
				dataList:[],
			}
		},
		methods:{
			queryList(){
				
			},
			/**
			 * 单选
			 */
			handleCheckChange(item){
				this.cancelList.forEach(item=>{
					item.checked = false
				})
				item.checked = true
			},
			
			handleNoCancel(){
				this.cancelList.forEach(item=>{
					item.checked = false
				})
				this.$emit("notCancel")
			},
			
			handleCancel(){
				let reason = this.cancelList.filter(p=>p.checked)
				if(reason.length <= 0){
					this.$u.toast('请选择取消原因')
					return
				}
				let data = reason[0]
				this.$emit("cancel", data)
			}
		}
	}
</script>

<style>
</style>